<template>
    <div>
        <table style="border: #fff,2px,solid;" width="100%">
            <tr>
                <td width="9%" style="background-color: #67a1ff;">时间</td>
                <td width="13%" v-for="item in 7" style="background-color: #67a1ff;">星期{{ weeks[item] }}</td>
            </tr>
            <tr v-for="section in 10">
                <td height="80px" style="  background-color: #eaf2ff;">第{{ section }}节</td>
                <td v-for="week in 7" style="  background-color: #eaf2ff;">
                    <div v-html="selected(week + '-' + section)"></div>
                </td>
            </tr>
        </table>
    </div>
</template>
<script>
import { jskb } from "@/api"
export default {
    data() {
        return {
            weeks: ["", "一", "二", "三", "四", "五", "六", "日"],
            list: []
        }
    },
    methods: {
        // 课表
        getScheduleList() {
            jskb().then(res => {
                console.log(res);
                // 3-1-2
                // 3-1
                // 3-2
                if (res.code == 0) {
                    // 处理数据
                    res.data.forEach(item => {
                        // console.log(item.time);

                        // 创建一个数组
                        item["times"] = []

                        let arr = item.time.split("-")
                        for (let i = 0; i < arr[2]; i++) {
                            item.times.push(arr[0] + "-" + (parseInt(arr[1]) + i))
                        }
                        // console.log(item.times);

                    })

                    this.list = res.data
                }

            })
        },
        selected(id) {
            let f = this.list.find(item => item.times.indexOf(id) != -1)
            console.log(f);
            if (f) {
                return `${f.courseName}<br/>${f.teacherName}<br>${f.location}`
            } else {
                return ""
            }
        }
    },
    mounted() {
        this.getScheduleList()
    }
}
</script>
<style>



.biao {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}
</style>